<template>
  <div class="custom-table boxes-list" v-loading="isLoading">
    <div v-if="!applies.length" class="easy-container no-data">{{ isLoading ? '' : '暂无数据' }}</div>
    <div v-for="apply in applies" :key="apply.id" class="list-item p-b-0 paper-card radius-2 hover">
      <div class="flex align-items-center">
        <router-link
          class="primary-hover-color title flex-1 f-normal no-warp-ellipsis"
          :to="`/${$rp.SPACES}/${apply.product_id}`"
          :title="apply.product_title"
          target="_blank"
        >
          {{ apply.product_title }}
        </router-link>
        <timeago :date-time="apply.created_at" enable-type="auto" pre-text="申请于 "/>
      </div>
      <div class="m-t-10 easy-container-20 border-top">
        <div>
          <span class="info-deep">申请人：</span>
          <router-link :to="`/${$rp.USERS}/${apply.user.id}`" class="link">
            {{ apply.user.nickname }}</router-link>
        </div>
        <div>
          <span class="info-deep">申请描述：</span>
          {{ apply.content }}
        </div>
        <div v-if="apply.reply">
          <span class="info-deep">拒绝理由：</span>
          {{ apply.reply }}
        </div>
        <div v-if="apply.state === 0" class="m-t-16">
          <el-button size="mini" type="primary"
                     @click="allowApply(apply)">通过申请</el-button>
          <el-button size="mini" @click="applyShow(apply.id)">拒绝并回复</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SpacesList', // 申请公开的空间的列表
  props: {
    applies: {
      type: Array,
      required: true,
    },
    isLoading: {
      type: Boolean,
      required: true,
    },
  },
  methods: {
    // 操作申请
    allowApply(apply) {
      const msg = `<div>确认通过空间 <strong>${apply.product_title}</strong> 的公开申请吗？</div>`;
      this.$confirm(msg, '提示', {
        dangerouslyUseHTMLString: true,
        customClass: 'confirm-left',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.$api.applyingForPublicSpaces.update({ applyId: apply.id, state: 1 })
          .then(() => {
            this.$message.success('操作成功');
            this.$emit('refreshList');
          })
          .catch(() => {});
      }).catch(() => {});
    },
    // 前往申请查看页面
    applyShow(applyId) { this.$router.push(`/${this.$rp.APPLICATION_FOR_PUBLIC_SPACES}/${applyId}`); },
  },
};
</script>

<style></style>
